<template>
	<view>
		<view class="container container-back ">
			<view class="top-container animation-slide-top">
				<image class="bg-img" src="https://cdn.quasar.dev/img/mountains.jpg"></image>
				<!-- <view class="heard"><text>我</text></view> -->
				<view class="user-wrapper">
					<navigator hover-class="opcity" :hover-stay-time="150" class="user">
						<image class="avatar-img" src="https://cdn.quasar.dev/img/avatar.png"></image>
						<text class="user-info-mobile">{{ loginUserInfo.name }}</text>
					</navigator>
				</view>
			</view>
			<view class="middle-container animation-slide-left">
				<!-- <view class="bottom-container"> -->
				<view class="ul-item">
					<view data-index="2" data-key="收藏" class="item" hover-class="opcity" :hover-stay-time="150">
						<image class="item-img" src="/static/me/shoucang.png"></image>
						<text class="item-name">收藏</text>
					</view>
					<view data-index="2" data-key="相册" class="item" hover-class="opcity" :hover-stay-time="150">
						<image class="item-img" src="/static/me/xiangce.png"></image>
						<text class="item-name">相册</text>
					</view>
					<view data-index="2" data-key="文件夹" class="item" hover-class="opcity" :hover-stay-time="150">
						<image class="item-img" src="/static/me/directory_favorite.png"></image>
						<text class="item-name">文件夹</text>
					</view>
				</view>
				<view class="ul-item">
					<view class="item" hover-class="opcity" :hover-stay-time="150">
						<image class="item-img" src="/static/me/biaoqingyidaosanke.png"></image>
						<text class="item-name">表情</text>
					</view>
					<view class="item" hover-class="opcity" :hover-stay-time="150">
						<button open-type="feedback" class="btn-feedback"></button>
						<image class="item-img" src="/static/me/fankui.png"></image>
						<text class="item-name">反馈</text>
					</view>
					<view data-index="3" class="item" hover-class="opcity" :hover-stay-time="150">
						<image class="item-img" src="/static/me/shezhi.png"></image>
						<text class="item-name">设置</text>
					</view>
				</view>
				<!-- </view> -->
			</view>
			<tab-bar class="" :current="pageIndex" />
		</view>
		<im-copy-right></im-copy-right>
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageIndex: 3,
			loginUserInfo: {}
		};
	},
	methods: {},
	created() {
		this.loginUserInfo = this.BenderSdk.getLoginUserInfo();
	}
};
</script>

<style scoped>
.container {
	height: 95vh;
}

.top-container {
	height: 344rpx;
	position: relative;
	display: flex;
	flex-direction: column;
}
.bottom-container {
	width: 100%;
	position: absolute;
}

.bg-img {
	position: absolute;
	width: 100%;
	height: 500rpx;
}

.logout {
	width: 110rpx;
	height: 36rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 42rpx 0 24rpx 32rpx;
	position: relative;
	z-index: 2;
}

.logout-img {
	width: 36rpx;
	height: 36rpx;
	margin-right: 11rpx;
}

.logout-txt {
	font-size: 28rpx;
	color: #fefefe;
	line-height: 28rpx;
}
.heard {
	display: flex;
	margin-top: 30rpx;
	justify-content: center;
	position: relative;
	font-size: 34rpx;
	font-weight: bold;
}

.user-wrapper {
	display: flex;
	margin-top: 120rpx;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.user {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.avatar-img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	align-self: center;
}

.user-info {
	display: flex;
	flex-direction: row;
	margin-top: 30rpx;
	align-items: center;
}

.user-info-mobile {
	margin-top: 30rpx;
	position: relative;
	font-size: 28rpx;
	color: #fefefe;
	line-height: 28rpx;
	align-self: center;
	padding: 0 50rpx;
}

.edit-img {
	position: absolute;
	width: 42rpx;
	height: 42rpx;
	right: 0;
	bottom: -4rpx;
}

.edit-img > image {
	width: 42rpx;
	height: 42rpx;
	padding-left: 25rpx;
}

.middle-item {
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.ticket-img {
	width: 80rpx;
	height: 80rpx;
	margin-left: 65rpx;
}

.middle-tag {
	font-size: 28rpx;
	color: #333333;
	line-height: 28rpx;
	font-weight: bold;
	padding-left: 22rpx;
}

.car-img {
	width: 80rpx;
	height: 80rpx;
	margin-left: 97rpx;
}

.middle-container {
	height: 240rpx;
	top: 120rpx;
	flex-direction: column;
	border-radius: 10rpx;
	background-color: #ffffff;
	margin: -30rpx 50rpx 50rpx 50rpx;
	padding: 74rpx 74rpx 74rpx 74rpx;
	box-shadow: 0 15rpx 10rpx -15rpx #efefef;
	position: relative;
	z-index: 2;
}

.ul-item {
	margin-top: 20rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.item {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.item-img {
	width: 64rpx;
	height: 64rpx;
}

.item-name {
	padding-top: 13rpx;
	font-size: 24rpx;
	color: #666666;
	min-width: 80rpx;
	text-align: center;
}

.btn-feedback {
	background: transparent !important;
	position: absolute;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	border: 0;
}

.btn-feedback::after {
	border: 0;
}
</style>
